<template>
	<view class="sxran-im-chat-input">
		<slot name='header'>
			<!-- <view class="chat-header-tools">
				<sxran-im-icon class='icon' name="photo" size='25'></sxran-im-icon>
				<sxran-im-icon class='icon' name="home" size='25'></sxran-im-icon>
				<sxran-im-icon class='icon' name="phone" size='25'></sxran-im-icon>
			</view> -->
		</slot>

		<view class="chat-input-content">
			<!-- #ifdef H5 -->
			<template v-if="$u.isMobile()">
				<view class="chat-textarea-body">
					<textarea @confirm='confirm' v-model="contentText" class="chat-textarea" placeholder=""
						auto-height />
					<uni-icons type="paperplane" @click='confirm' color='var(--uni-text-color)' size='20'
						style="margin-left: 10px;"></uni-icons>
				</view>
			</template>
			<template v-else>
				<div class="sxran-im-im-chat-input" ref="contenteditable" contenteditable="true"></div>
			</template>
			<!-- #endif -->

			<!-- #ifndef H5 -->
			<view class="chat-textarea-body">
				<textarea @confirm='confirm' v-model="contentText" class="chat-textarea" placeholder="" auto-height />
				<uni-icons type="paperplane" @click='confirm' color='var(--uni-text-color)' size='20'
					style="margin-left: 10px;"></uni-icons>
			</view>
			<!-- #endif -->
		</view>

		<!-- #ifdef H5 -->
		<template v-if="!$u.isMobile()">
			<view class="chat-foot-tools">
				<slot name="foot">
					<view class="">
						<uni-icons type="paperplane" @click='confirm' color='var(--uni-text-color)' size='30'
							style="margin-left: 10px;"></uni-icons>
					</view>
				</slot>

			</view>
		</template>
		<!-- #endif -->


	</view>
</template>

<script>
	export default {
		name: 'sxran-im-chat-input',
		data() {
			return {
				contentText: ""
			}
		},
		methods: {
			confirm() {
				// #ifdef H5
				if (!uni.$u.isMobile()) {
					this.contentText = this.$refs.contenteditable.innerHTML;
					this.$refs.contenteditable.innerHTML = null;
				}
				
				// #endif
				this.$emit('confirm', uni.$u.processText(this.contentText));
				this.contentText = ''

			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-chat-input {
		// height: 66px;
		.chat-foot-tools {
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.chat-header-tools {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-sm $uni-spacing-row-lg;

			.icon:not(:last-child) {
				margin-left: $uni-spacing-row-sm;
				/* Optional: space between items */
			}

			.icon:last-child {
				margin-left: auto;
				/* Push to the right */
			}
		}

		.chat-input-content {
			// flex-grow: 1;
			// flex-shrink: 0;
			// padding: 0 $uni-spacing-row-lg;
			overflow: hidden;

			.sxran-im-im-chat-input {
				padding: $uni-spacing-col-lg $uni-spacing-row-lg ;
				border: none;
				// background-color: red;
				min-height: 100px;
				max-height: 150px;
				color: var(--uni-text-color);
				overflow-y: auto;

				&:focus-visible {
					outline: none;
				}

				:deep(img) {
					max-width: 100px !important;
				}
			}

			.chat-textarea-body {
				margin: $uni-spacing-col-lg $uni-spacing-row-lg ;
				padding: 0 $uni-spacing-row-lg ;
				// margin-bottom: 40px;
				display: flex;
				align-items: center;
				background-color: var(--uni-bg-color-grey);
				border: 1px solid var(--uni-border-color);
				border-radius: 50px;
				overflow: hidden;

				.chat-textarea {
					width: 100%;
					height: 100%;
					overflow-y: auto;
					color: var(--uni-text-color);
					padding: 10px;
					flex: 1;
				}
			}

		}
	}
</style>